<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Generate Json</title>
    <style>
        body > div{
            margin-top: 20px;
        }
        input{
            height: 25px;
            width: 300px;
            vertical-align: middle;
        }
        i{
            display: inline-block;
            width: 25px;
            height: 25px;
            vertical-align: middle;
            background-size: 100%;
        }
        .content{
            /*width: 50%;*/
        }
        .add{
            background-image: url("");
        }
        .delete{
            background-image: url("");
        }
        .menu{
            margin-top: 10px;
        }
        .menu > .menu{
            margin-left: 30px;
        }
        /*textarea{*/
            /*display: inline-block;*/
            /*box-sizing: border-box;*/
            /*!*width: 80%;*!*/
            /*width: 300px;*/
            /*!*height: 50px;*!*/
            /*vertical-align: middle;*/
        /*}*/
        .menu_text{
            display: inline-block;
            width: 300px;
            min-height: 30px;
            max-height: 160px;
            overflow-y: auto;
            border: 1px solid rgb(169, 169, 169);
            vertical-align: middle;
            line-height: 16px;
        }
        .menu .type{
            margin-left: 1px;
        }
        .menu_file{
            min-height: 32px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div>
    <i class="add" id="first_add"></i>
</div>
<div class="content"></div>
<div>
    <button id="generate_json">
        Generate Json
    </button>
</div>
<!--<div>-->
    <!--<textarea id="json_result">-->

    <!--</textarea>-->
<!--</div>-->
<script>
    var $content = document.getElementsByClassName('content')[0];
    document.getElementById('first_add').addEventListener('click', function(){
        appendMenu($content);
    });
    $content.addEventListener('click', function(e){
        var $target = e.target;
        if($target.className === 'add'){
            appendMenu($target.parentNode);
        } else if($target.className === 'delete'){
            $target.parentNode.parentNode.removeChild($target.parentNode);
        }
    });
    document.getElementById('generate_json').addEventListener('click', function(){
        var result,
            $menu = $content.childNodes;
        if($menu.length > 1){
            result = [];
            $menu.forEach(function($cur_menu){
                result.push(parseMenu($cur_menu, {}));
            });
        } else if($menu.length === 1){
            result = {};
            parseMenu($menu[0], result);
        } else {
            result = {}
        }
        document.getElementById('json_result').value = JSON.stringify(result);
    });
    function appendMenu($target){
        var menu = document.createElement('div');
        menu.className = 'menu';
        menu.innerHTML = '<div class="menu_text" contenteditable="true"></div>' +
                '<select class="type">' +
                '<option value="text">text</option>' +
                '<option value="code">code</option>' +
                '<option value="image">image</option>' +
                '</select>' +
                '<i class="add"></i><i class="delete"></i>';
        $target.appendChild(menu);
        addSelectEvent(menu);
    }
    function addSelectEvent($menu){
        $menu.getElementsByClassName('type')[0].addEventListener('change', function(){
            $menu.removeChild($menu.childNodes[0]);
            if(this.value === 'text' || this.value === 'code'){
                var div = document.createElement('div');
                div.className = 'menu_text';
                div.setAttribute('contenteditable', 'true');
                $menu.insertBefore(div, this);
            } else if(this.value === 'image'){
                var file_input = document.createElement('input');
                file_input.className = 'menu_file';
                file_input.setAttribute('type', 'file');
                $menu.insertBefore(file_input, this);
            }
        });
    }
    function parseMenu($menu, result){
        var value = $menu.childNodes[0].value;
        if(/^{.*}$/.test(value)){
            value = JSON.parse(value);
        }
        result.content = value;
        var next_menu = $menu.childNodes;
        if(next_menu.length - 3 > 0){
            result.children = [];
            next_menu.forEach(function($cur_menu){
                if($cur_menu.className === 'menu'){
                    result.children.push(parseMenu($cur_menu, {}));
                }
            });
        }
        return result;
    }
</script>
</body>
</html>